<script setup lang="ts">
import {ref} from "vue";

const message = ref('');
</script>

<template>
    <div class="whole">
        <div class="title">
            <van-icon name="notes-o" size="20" style="margin-right: 3px"/>
            <span>咨询内容</span>
        </div>
        <div>
            <van-cell-group inset style="margin-top: 2vh; border: #9e75f5">
                <van-field
                        v-model="message"
                        rows="2"
                        autosize
                        type="textarea"
                        maxlength="300"
                        placeholder="你现在最需要接收帮助的主要问题是什么"
                        show-word-limit
                />
            </van-cell-group>
        </div>

        <footer>
            <button>预约咨询</button>
            <div><input type="checkbox" name="" id=""><span style="color: #38A0FB"><router-link
                    to="/agree">《预约协议》</router-link></span>，勾选代表已同意
            </div>
        </footer>
    </div>
</template>

<style scoped lang="less">
.whole {
    width: 90%;
    margin: 0 auto 3vh;

    footer {
        text-align: center;
        width: 100%;
        margin: 2vh auto;

        button {
            padding: 8px;
            background-color: #9e75f5;
            color: white;
            border: none;
            width: 80%;
            border-radius: 5px;
            margin-bottom: 2vh;
        }
    }
}
</style>